<template>
    <Header />
    
    <!-- 手机端 -->
    <div class="serviceBody-phone hidden-sm-and-up">

        <div class="service1 mb30">
            <div class="flex-aliign-column">
                
                <el-avatar :size="50" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                <div class="mt10 mb20">客户服务</div>
            </div>
            <div>
                <img class="erweima" src="@/static/erweima.jpg" alt="">
            </div>
            <div class="flex-aliign-column" style="height: 150px;justify-content: space-around">
                <div>扫一扫添加客服</div>
                <div class="flex-aliign-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="15.663479804992676" viewBox="0 0 16 15.663479804992676"><defs><clipPath id="master_svg0_282_26997"><rect x="0" y="0" width="16" height="15.663479804992676" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_282_26997)"><g><path d="M12.1839,7.32168C12.2224,7.57427,12.4403,7.75469,12.6878,7.75469C12.714,7.75469,12.7398,7.75299,12.7661,7.7489C13.0449,7.70601,13.2362,7.44525,13.1933,7.16679C12.5159,2.75468,8.56024,2.54737,8.52041,2.54567C8.24638,2.53103,8.00128,2.75366,7.99004,3.03553C7.97881,3.31739,8.19838,3.555,8.4799,3.56623C8.51156,3.56759,11.6325,3.73235,12.1839,7.32168ZM13.3242,2.45151C9.84789,-1.02242,6.67557,0.196607,6.54213,0.250392C6.28069,0.35558,6.15371,0.653102,6.2589,0.914541C6.36443,1.17632,6.66127,1.30329,6.92305,1.19777C6.9496,1.18721,9.59837,0.171416,12.6022,3.17353C15.3691,5.93905,14.5568,8.74713,14.5218,8.86321C14.4377,9.13248,14.5871,9.41911,14.8561,9.50353C14.9068,9.51953,14.9585,9.52668,15.0089,9.52668C15.2264,9.52668,15.428,9.38711,15.4964,9.16891C15.5406,9.02729,16.5449,5.67013,13.3242,2.45151ZM12.1284,14.479C12.0794,14.528,11.9194,14.6421,11.4864,14.6421C10.0829,14.6421,7.39326,13.4629,4.80407,10.8744C1.4047,7.47432,0.631616,4.11784,1.19943,3.55037C1.56639,3.18306,2.3296,2.41917,3.05128,2.41917C3.45059,2.41917,3.82913,2.64895,4.20801,3.12145C5.30006,4.48208,4.82722,4.94879,4.04359,5.72187L3.89789,5.86621C3.70147,6.06228,3.59765,6.321,3.59765,6.61478C3.59731,7.08387,3.82402,7.93388,5.78481,9.89297C7.74593,11.8531,8.59561,12.0798,9.06436,12.0798L9.0647,12.0798C9.35745,12.0798,9.61583,11.9766,9.81225,11.7809L9.95624,11.6355C10.3824,11.2036,10.7508,10.8301,11.2165,10.8301C11.5773,10.8301,12.0287,11.0456,12.5577,11.4704C13.0084,11.833,13.2375,12.1925,13.2576,12.571C13.2981,13.3107,12.5083,14.0998,12.1284,14.479ZM13.1973,10.6746C12.4722,10.0918,11.8241,9.80888,11.2165,9.80888C10.3236,9.80888,9.74212,10.3985,9.22912,10.9186L9.06436,11.0585C8.90743,11.0585,8.25962,10.9227,6.50683,9.17061C4.46128,7.12642,4.61991,6.58925,4.61991,6.58822L4.76084,6.44865C5.56796,5.65243,6.67363,4.56174,5.00458,2.48249C4.42723,1.76319,3.7699,1.39793,3.05128,1.39793C1.90681,1.39793,0.976456,2.32862,0.477068,2.82801C-0.999649,4.30575,1.16198,8.67598,4.08206,11.5964C6.89183,14.4055,9.82518,15.6633,11.4864,15.6633C12.0855,15.6633,12.5448,15.5074,12.8508,15.2014C13.3349,14.7173,14.3425,13.7107,14.2775,12.5155C14.241,11.8405,13.8775,11.2209,13.1973,10.6746Z" fill="#3D3D3D" fill-opacity="1"/></g></g></svg><span class="ml10">电话：188 7729 1111</span></div>
                <div>客服服务时间</div>
                <div>7：00~23：00</div>

            </div>

        </div>
        <div class="service1">
            <div class="flex-aliign-column">
                <el-avatar :size="50" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                <div class="mt10 mb20">展会服务</div>
            </div>
            <div>
                <img class="erweima" src="@/static/erweima.jpg" alt="">
            </div>
            <div class="flex-aliign-column" style="height: 150px;justify-content: space-around">
                <div>扫一扫添加客服</div>
                <div class="flex-aliign-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="15.663479804992676" viewBox="0 0 16 15.663479804992676"><defs><clipPath id="master_svg0_282_26997"><rect x="0" y="0" width="16" height="15.663479804992676" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_282_26997)"><g><path d="M12.1839,7.32168C12.2224,7.57427,12.4403,7.75469,12.6878,7.75469C12.714,7.75469,12.7398,7.75299,12.7661,7.7489C13.0449,7.70601,13.2362,7.44525,13.1933,7.16679C12.5159,2.75468,8.56024,2.54737,8.52041,2.54567C8.24638,2.53103,8.00128,2.75366,7.99004,3.03553C7.97881,3.31739,8.19838,3.555,8.4799,3.56623C8.51156,3.56759,11.6325,3.73235,12.1839,7.32168ZM13.3242,2.45151C9.84789,-1.02242,6.67557,0.196607,6.54213,0.250392C6.28069,0.35558,6.15371,0.653102,6.2589,0.914541C6.36443,1.17632,6.66127,1.30329,6.92305,1.19777C6.9496,1.18721,9.59837,0.171416,12.6022,3.17353C15.3691,5.93905,14.5568,8.74713,14.5218,8.86321C14.4377,9.13248,14.5871,9.41911,14.8561,9.50353C14.9068,9.51953,14.9585,9.52668,15.0089,9.52668C15.2264,9.52668,15.428,9.38711,15.4964,9.16891C15.5406,9.02729,16.5449,5.67013,13.3242,2.45151ZM12.1284,14.479C12.0794,14.528,11.9194,14.6421,11.4864,14.6421C10.0829,14.6421,7.39326,13.4629,4.80407,10.8744C1.4047,7.47432,0.631616,4.11784,1.19943,3.55037C1.56639,3.18306,2.3296,2.41917,3.05128,2.41917C3.45059,2.41917,3.82913,2.64895,4.20801,3.12145C5.30006,4.48208,4.82722,4.94879,4.04359,5.72187L3.89789,5.86621C3.70147,6.06228,3.59765,6.321,3.59765,6.61478C3.59731,7.08387,3.82402,7.93388,5.78481,9.89297C7.74593,11.8531,8.59561,12.0798,9.06436,12.0798L9.0647,12.0798C9.35745,12.0798,9.61583,11.9766,9.81225,11.7809L9.95624,11.6355C10.3824,11.2036,10.7508,10.8301,11.2165,10.8301C11.5773,10.8301,12.0287,11.0456,12.5577,11.4704C13.0084,11.833,13.2375,12.1925,13.2576,12.571C13.2981,13.3107,12.5083,14.0998,12.1284,14.479ZM13.1973,10.6746C12.4722,10.0918,11.8241,9.80888,11.2165,9.80888C10.3236,9.80888,9.74212,10.3985,9.22912,10.9186L9.06436,11.0585C8.90743,11.0585,8.25962,10.9227,6.50683,9.17061C4.46128,7.12642,4.61991,6.58925,4.61991,6.58822L4.76084,6.44865C5.56796,5.65243,6.67363,4.56174,5.00458,2.48249C4.42723,1.76319,3.7699,1.39793,3.05128,1.39793C1.90681,1.39793,0.976456,2.32862,0.477068,2.82801C-0.999649,4.30575,1.16198,8.67598,4.08206,11.5964C6.89183,14.4055,9.82518,15.6633,11.4864,15.6633C12.0855,15.6633,12.5448,15.5074,12.8508,15.2014C13.3349,14.7173,14.3425,13.7107,14.2775,12.5155C14.241,11.8405,13.8775,11.2209,13.1973,10.6746Z" fill="#3D3D3D" fill-opacity="1"/></g></g></svg><span class="ml10">电话：188 7729 1111</span></div>
                <div>客服服务时间</div>
                <div>7：00~23：00</div>
            </div>

        </div>
    </div>
    <div class="body hidden-xs-only">

        

        <!-- PC -->
        <div class="serviceBody ">

            <div class="service1 mb30">
                <div class="flex-aliign-column">
                    <el-avatar :size="50" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                    <div class="mt10">客户服务</div>
                </div>
                <div>
                    <img class="erweima" src="@/static/erweima.jpg" alt="">
                </div>
                <div class="flex-aliign-column" style="height: 150px;justify-content: space-around">
                    <div>扫一扫添加客服</div>
                    <div class="flex-aliign-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="15.663479804992676" viewBox="0 0 16 15.663479804992676"><defs><clipPath id="master_svg0_282_26997"><rect x="0" y="0" width="16" height="15.663479804992676" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_282_26997)"><g><path d="M12.1839,7.32168C12.2224,7.57427,12.4403,7.75469,12.6878,7.75469C12.714,7.75469,12.7398,7.75299,12.7661,7.7489C13.0449,7.70601,13.2362,7.44525,13.1933,7.16679C12.5159,2.75468,8.56024,2.54737,8.52041,2.54567C8.24638,2.53103,8.00128,2.75366,7.99004,3.03553C7.97881,3.31739,8.19838,3.555,8.4799,3.56623C8.51156,3.56759,11.6325,3.73235,12.1839,7.32168ZM13.3242,2.45151C9.84789,-1.02242,6.67557,0.196607,6.54213,0.250392C6.28069,0.35558,6.15371,0.653102,6.2589,0.914541C6.36443,1.17632,6.66127,1.30329,6.92305,1.19777C6.9496,1.18721,9.59837,0.171416,12.6022,3.17353C15.3691,5.93905,14.5568,8.74713,14.5218,8.86321C14.4377,9.13248,14.5871,9.41911,14.8561,9.50353C14.9068,9.51953,14.9585,9.52668,15.0089,9.52668C15.2264,9.52668,15.428,9.38711,15.4964,9.16891C15.5406,9.02729,16.5449,5.67013,13.3242,2.45151ZM12.1284,14.479C12.0794,14.528,11.9194,14.6421,11.4864,14.6421C10.0829,14.6421,7.39326,13.4629,4.80407,10.8744C1.4047,7.47432,0.631616,4.11784,1.19943,3.55037C1.56639,3.18306,2.3296,2.41917,3.05128,2.41917C3.45059,2.41917,3.82913,2.64895,4.20801,3.12145C5.30006,4.48208,4.82722,4.94879,4.04359,5.72187L3.89789,5.86621C3.70147,6.06228,3.59765,6.321,3.59765,6.61478C3.59731,7.08387,3.82402,7.93388,5.78481,9.89297C7.74593,11.8531,8.59561,12.0798,9.06436,12.0798L9.0647,12.0798C9.35745,12.0798,9.61583,11.9766,9.81225,11.7809L9.95624,11.6355C10.3824,11.2036,10.7508,10.8301,11.2165,10.8301C11.5773,10.8301,12.0287,11.0456,12.5577,11.4704C13.0084,11.833,13.2375,12.1925,13.2576,12.571C13.2981,13.3107,12.5083,14.0998,12.1284,14.479ZM13.1973,10.6746C12.4722,10.0918,11.8241,9.80888,11.2165,9.80888C10.3236,9.80888,9.74212,10.3985,9.22912,10.9186L9.06436,11.0585C8.90743,11.0585,8.25962,10.9227,6.50683,9.17061C4.46128,7.12642,4.61991,6.58925,4.61991,6.58822L4.76084,6.44865C5.56796,5.65243,6.67363,4.56174,5.00458,2.48249C4.42723,1.76319,3.7699,1.39793,3.05128,1.39793C1.90681,1.39793,0.976456,2.32862,0.477068,2.82801C-0.999649,4.30575,1.16198,8.67598,4.08206,11.5964C6.89183,14.4055,9.82518,15.6633,11.4864,15.6633C12.0855,15.6633,12.5448,15.5074,12.8508,15.2014C13.3349,14.7173,14.3425,13.7107,14.2775,12.5155C14.241,11.8405,13.8775,11.2209,13.1973,10.6746Z" fill="#3D3D3D" fill-opacity="1"/></g></g></svg><span class="ml10">电话：188 7729 1111</span></div>
                    <div>客服服务时间</div>
                    <div>7：00~23：00</div>
    
                </div>
    
            </div>
            <div class="service1">
                <div class="flex-aliign-column">
                    <el-avatar :size="50" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                    <div class="mt10">客户服务</div>
                </div>
                <div>
                    <img class="erweima" src="@/static/erweima.jpg" alt="">
                </div>
                <div class="flex-aliign-column" style="height: 150px;justify-content: space-around">
                    <div>扫一扫添加客服</div>
                    <div class="flex-aliign-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="15.663479804992676" viewBox="0 0 16 15.663479804992676"><defs><clipPath id="master_svg0_282_26997"><rect x="0" y="0" width="16" height="15.663479804992676" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_282_26997)"><g><path d="M12.1839,7.32168C12.2224,7.57427,12.4403,7.75469,12.6878,7.75469C12.714,7.75469,12.7398,7.75299,12.7661,7.7489C13.0449,7.70601,13.2362,7.44525,13.1933,7.16679C12.5159,2.75468,8.56024,2.54737,8.52041,2.54567C8.24638,2.53103,8.00128,2.75366,7.99004,3.03553C7.97881,3.31739,8.19838,3.555,8.4799,3.56623C8.51156,3.56759,11.6325,3.73235,12.1839,7.32168ZM13.3242,2.45151C9.84789,-1.02242,6.67557,0.196607,6.54213,0.250392C6.28069,0.35558,6.15371,0.653102,6.2589,0.914541C6.36443,1.17632,6.66127,1.30329,6.92305,1.19777C6.9496,1.18721,9.59837,0.171416,12.6022,3.17353C15.3691,5.93905,14.5568,8.74713,14.5218,8.86321C14.4377,9.13248,14.5871,9.41911,14.8561,9.50353C14.9068,9.51953,14.9585,9.52668,15.0089,9.52668C15.2264,9.52668,15.428,9.38711,15.4964,9.16891C15.5406,9.02729,16.5449,5.67013,13.3242,2.45151ZM12.1284,14.479C12.0794,14.528,11.9194,14.6421,11.4864,14.6421C10.0829,14.6421,7.39326,13.4629,4.80407,10.8744C1.4047,7.47432,0.631616,4.11784,1.19943,3.55037C1.56639,3.18306,2.3296,2.41917,3.05128,2.41917C3.45059,2.41917,3.82913,2.64895,4.20801,3.12145C5.30006,4.48208,4.82722,4.94879,4.04359,5.72187L3.89789,5.86621C3.70147,6.06228,3.59765,6.321,3.59765,6.61478C3.59731,7.08387,3.82402,7.93388,5.78481,9.89297C7.74593,11.8531,8.59561,12.0798,9.06436,12.0798L9.0647,12.0798C9.35745,12.0798,9.61583,11.9766,9.81225,11.7809L9.95624,11.6355C10.3824,11.2036,10.7508,10.8301,11.2165,10.8301C11.5773,10.8301,12.0287,11.0456,12.5577,11.4704C13.0084,11.833,13.2375,12.1925,13.2576,12.571C13.2981,13.3107,12.5083,14.0998,12.1284,14.479ZM13.1973,10.6746C12.4722,10.0918,11.8241,9.80888,11.2165,9.80888C10.3236,9.80888,9.74212,10.3985,9.22912,10.9186L9.06436,11.0585C8.90743,11.0585,8.25962,10.9227,6.50683,9.17061C4.46128,7.12642,4.61991,6.58925,4.61991,6.58822L4.76084,6.44865C5.56796,5.65243,6.67363,4.56174,5.00458,2.48249C4.42723,1.76319,3.7699,1.39793,3.05128,1.39793C1.90681,1.39793,0.976456,2.32862,0.477068,2.82801C-0.999649,4.30575,1.16198,8.67598,4.08206,11.5964C6.89183,14.4055,9.82518,15.6633,11.4864,15.6633C12.0855,15.6633,12.5448,15.5074,12.8508,15.2014C13.3349,14.7173,14.3425,13.7107,14.2775,12.5155C14.241,11.8405,13.8775,11.2209,13.1973,10.6746Z" fill="#3D3D3D" fill-opacity="1"/></g></g></svg><span class="ml10">电话：188 7729 1111</span></div>
                    <div>客服服务时间</div>
                    <div>7：00~23：00</div>
                </div>
    
            </div>
        </div>
    </div>
    <Footer />
</template>
<script lang="ts" setup>
    import Header from '@/components/Header.vue'
    import Footer from '@/components/Footer.vue'
    import Map from '@/components/Map.vue'
</script>

<style lang="scss" scoped>
    @import '@/assets/variables.scss';
    .body{
        height: 600px;
        display: flex;
        align-items: center;
    }
    .serviceBody {
        width: 700px;
        margin: 0px auto;
        border-radius: 10px;
        padding: 50px 30px;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
        .erweima{
            width: 150px;
            height: 150px;
        }
        .service1{
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
      
    }

    .serviceBody-phone {
        margin: 0px auto;
        border-radius: 10px;
        padding: 50px 30px;

        .erweima{
            width: 150px;
            height: 150px;
        }
        .service1{
            display: flex;
            align-items: center;
            flex-direction: column;
        }
      
    }

    
</style>